import { render } from 'react';
import React,{useState,useEffect} from 'react';
import Demo from './demo';
import Control from './control';
import Todolist from './todolist'
import User from './user'
import Mycontext from './store'


//引入图片
import image from './image/1.jpg'
import { Color } from 'chalk';
//const img = require('./image/3.jpg').default


//APP 就是一个组件，封装了一块HTML内容

/*
function App() {
  console.log("<div>zhou</div>")  //一个字符串
  console.log(<div className="box" >zhou</div>)    
  //一个对象，用对象描述一个DOM节点

  const ele = <div>money!money!money!</div>;
  const txt1 = 'I will have money!';
  const txt2 = 'more money!';
  //上下ele ele2是完全等价的，上面是语法糖，下面是真实的原理
  const ele2 = React.createElement('div',null,'money!money!money!')
  console.log(ele2)
  return (
    <div className="App">
      HELLO 12378978 {ele} {txt1} {txt2} {ele2}
    </div>
  );
}
*/

// const Header = (props) => {
//   return <header>{[1,2,3,4,5]}这是标题{props.title}</header>
// }
// const Footer = () => {
//   return <footer>这是页尾</footer>
// }

// const Content = (props) => {
//   return <ul>
//     {
//       props.map( item => {
//         return <li>{item}</li>
//       })
//     }
//   </ul>
// }


// //类组件
// class Footer extends React.Component{
//   constructor(){
//     super();
//     this.state = {  //state不能变
//       time: new Date().toLocaleTimeString(),
//       a:0,
//       b:''
//     }
//     setInterval(() => {
//       this.setState({time:new Date().toLocaleTimeString()})
//     },1000)
//   }
//   render(){
//     return <div> 
//       <h2>{this.state.time}</h2>
//       <footer>这是页尾（类组件形式）{this.props.data}</footer>
//     </div>
//   }
// }
// function App(){
//   return(
//     <div>
//       <Header title='RMB'/>
//         hello money
//         <div>
//           <Header title='小付' />
//         </div>
//       <Footer data='嘿嘿嘿'/>
//     </div>
//   )
// }




export default App;
